<template>
  <div>
    <el-dialog
      :title="$t('invitationCodeLang.invitation_code')"
      :visible.sync="Visible"
      width="40%"
      append-to-body
      :close-on-click-modal="false"
      @close="cancel"
    >
      <div class="midContant clearfix">
        <div class="txt">{{$t('invitationCodeLang.code_true_msg')}}</div>
        <div class="code">{{invitationCode}}</div>  
        <div style="display:flex;flex-direction:column;justify-content:center;align-items:center;">
          <h2 style="margin:20px 0;color:#639DE3">{{$t('invitationCodeLang.app_register')}}</h2>
          <canvas ref="qrcode"></canvas>
          <el-button type="primary" style="margin:10px 0 20px;" @click="downloadQR" size="small"
          >{{$t('invitationCodeLang.downLoad_code')}}</el-button>
          <a style="color:#639DE3" :href="code_url" target="_blank">{{code_url}}</a>
          
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import QRCode from 'qrcode'

export default {
  props: {
  },
  components: { },
  data() {
    return {
      Visible: false,
      code_url:'',
      code_options: {
        width: 200,
        height: 200,
        color: {
          dark: '#000000',
          light: '#ffffff'
        }
      },
      invitationCode:JSON.parse(sessionStorage.getItem('userData')).invite_code,
      lang:!!JSON.parse(localStorage.getItem('language'))?JSON.parse(localStorage.getItem('language')).lang:'zh'
    };
  },
  created() {
  },
  mounted() {},
  watch: {},
  methods: {
    init(data) {
      this.Visible = true;
      this.copy()
      this.code_url=window.location.origin=="https://admin.memart.com"?window.location.origin+"/DeltaRegister/?invitationCode="+this.invitationCode+"&lang="+this.lang:window.location.origin+"/register/?invitationCode="+this.invitationCode+"&lang="+this.lang
      this.$nextTick(()=>{
        QRCode.toCanvas(this.$refs.qrcode, this.code_url, this.code_options)
      })
    },
    copy(){
      const textArea = document.createElement('textArea')
      textArea.value = this.invitationCode
      document.body.appendChild(textArea)

      textArea.select()
      document.execCommand('copy')
      document.body.removeChild(textArea)
    },
    downloadQR() {
    QRCode.toDataURL(this.code_url, this.code_options, (err, url) => {
      if (err) return console.error(err)
      
      const link = document.createElement('a')
      link.href = url
      link.download = 'qrcode.png'
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    })
  },
//取消修改
    cancel(){
      this.invitationCode= ""
      this.Visible = false;
      let dom=document.getElementsByClassName('el-input__inner')
      for(let i=0;i<dom.length;i++){
        dom[i].style.border='1px solid #E0E3E9'
      }
    },
  },
};
</script>

<style scoped lang="less" >
.midContant {
  border: 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
  .txt{
    margin: 10px;
    font-size: 26px;
    font-weight: 700;
  }
  .code{
    border: 1px solid #E0E3E9;
    background-color: #ccc;
    padding: 5px;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 5px;
    width: max-content;
  }
}
</style>